<template>
  <el-dialog :before-close="cancelFn" v-model="outerVisible" title="编辑">
    <template #default>
      <el-form
        ref="ruleFormRef"
        :model="fromData"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="pass">
          <el-input
            v-model="fromData.username"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="checkPass">
          <el-input
            v-model="fromData.nickName"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="age">
          <el-input v-model="fromData.email" />
        </el-form-item>
        <el-form-item label="密码" prop="age">
          <el-input type="password" v-model="fromData.password" />
        </el-form-item>
        <el-form-item label="备注" prop="age">
          <el-input
            v-model="fromData.note"
            :autosize="{ minRows: 4, maxRows: 6 }"
            type="textarea"
            placeholder="Please input"
          />
        </el-form-item>
        <el-form-item label="是否启用" prop="age">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="fromData.status"
            class="ml-2"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="open">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, toRefs, ref, watch, Ref } from "vue";
import { getAdminUpdateAPI } from "../../../request/api";
let props = defineProps<{ outerVisible: boolean; ruleForm: IdialogruleForm }>();
let emit = defineEmits<{
  (
    event: "controlDialog",
    val: boolean,
    ruleForm: IdialogruleForm,
    reload?: boolean
  ): void;
}>();
//监听并且浅拷贝父组件给的数据(防止子组件修改父组件数据)
watch(
  () => props.outerVisible,
  (newVal, oldVal) => {
    if (newVal) {
      fromData.value = { ...props.ruleForm };
    }
  }
);
//弹出框表单数据
let fromData = ref({}) as Ref<IdialogruleForm>;
let tempObj: AdminListParamsList;
//取消按钮
const cancelFn = () => {
  emit("controlDialog", false, tempObj);
};
//验证函数
const rules = reactive({});
//确认按钮
const open = () => {
  ElMessageBox.confirm("此操作将修改当前用户信息, 是否继续?", "Warning", {
    title: "提示",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await getAdminUpdateAPI(fromData.value, props.ruleForm.id);
      if (res.code != 200) {
        ElMessage({
          type: "error",
          message: "修改失败",
        });
      }
      ElMessage({
        type: "success",
        message: "编辑成功",
      });
      emit("controlDialog", false, tempObj, true);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消修改",
      });
    });

};
</script>
<style lang="less" scoped></style>
